import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar' ;
import NavDropdown from 'react-bootstrap/NavDropdown';
import Form from 'react-bootstrap/Form';
import FormControl from 'react-bootstrap/FormControl';
import Button from 'react-bootstrap/Button';
import { Col, Row } from 'react-bootstrap';
import { Link, useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import useGlobalConext from '../GlobalContext';
import useMessageBox from '../Modal/MessageBox_Context';

function NavBar() {
  const [context, dispatch] = useGlobalConext();
  const showMessageBox = useMessageBox();
  const navigate = useNavigate();

  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand>古诗词网</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto w-100">
            <Nav.Link to="/" as={Link}>
              <FontAwesomeIcon icon="home" className='me-2' />
              推荐
            </Nav.Link>
            <Nav.Link to="/poem" as={Link}>
              <FontAwesomeIcon icon="paper-plane" className='me-2' />
              诗词
            </Nav.Link>
            <Nav.Link to="/author" as={Link}>
              <FontAwesomeIcon icon="pen" className='me-2' />
              作者
            </Nav.Link>
            <Nav.Link to="/tag" as={Link}>
              <FontAwesomeIcon icon="tags" className='me-2' />
              标签
            </Nav.Link>
            <Nav.Link to="/search" as={Link}>
              <FontAwesomeIcon icon="search" className='me-2' />
              搜索
            </Nav.Link>

            {
              context.user.id ? (
                <div className='d-flex ms-lg-auto'>
                  
                  <NavDropdown title={
                      <span>
                        <FontAwesomeIcon icon="user" className='me-2' />
                        {context.user.nickname}
                      </span>
                    } id="basic-nav-dropdown" className='ms-lg-auto'>
                    <NavDropdown.Item to="/me" as={Link}>
                      <FontAwesomeIcon icon="user" className='me-2' />
                      个人中心
                    </NavDropdown.Item>
                    <NavDropdown.Item to="/me/collection" as={Link}>
                      <FontAwesomeIcon icon="star" className='me-2' />
                      收藏
                    </NavDropdown.Item>
                    {
                      context.user.role === 'admin' && (
                        <NavDropdown.Item to="/admin" as={Link}>
                          <FontAwesomeIcon icon="cog" className='me-2' />
                          <FontAwesomeIcon icon="key" className='me-2' />
                          管理
                        </NavDropdown.Item>
                      )
                    }
                    <NavDropdown.Divider />
                    <NavDropdown.Item onClick={ () => {
                      showMessageBox('提示', '确定要退出吗？', 'confirmcancel')
                        .then((result) => result === 'confirm' && dispatch({ type: 'logout' }));
                    }}>
                      <FontAwesomeIcon icon="right-from-bracket" className='me-2' />
                      退出
                    </NavDropdown.Item>
                  </NavDropdown>
                </div>
              ) : (
                <Nav.Link to="/login" as={Link} className='ms-lg-auto'>
                  <FontAwesomeIcon icon="user" className='me-2' />
                  登录
                </Nav.Link>
              )
            }
            
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default NavBar;